<script setup lang="ts">
import { useMessage } from "wot-design-uni";

interface user {
  count: number;
  title: string;
}
const list = ref([
  {
    count: 23,
    title: "收藏",
  },
  {
    count: 150,
    title: "关注",
  },
  {
    count: 230,
    title: "积分",
  },
  {
    count: 3,
    title: "优惠劵",
  },
]);
const iconList = ref([
  {
    icon: "/src/static/my/my01.png",
    title: "代付款",
  },
  {
    icon: "/src/static/my/my02.png",
    title: "代发款",
  },
  {
    icon: "/src/static/my/my03.png",
    title: "代收款",
  },
  {
    icon: "/src/static/my/my04.png",
    title: "已完成",
  },
]);
const tools = ref([
  {
    icon: "/src/static/my/tool-01.svg",
    title: "我的问诊",
  },
  {
    icon: "/src/static/my/tool-02.svg",
    title: "我的处方",
  },
  {
    icon: "/src/static/my/tool-03.svg",
    title: "家庭档案",
  },
  {
    icon: "/src/static/my/tool-04.svg",
    title: "地址管理",
  },
  {
    icon: "/src/static/my/tool-05.svg",
    title: "我的评价",
  },
  {
    icon: "/src/static/my/tool-06.svg",
    title: "官方客服",
  },
  {
    icon: "/src/static/my/tool-07.svg",
    title: "设置",
  },
]);
const fncoupon = (index: number) => {
  if (index == 3) {
    uni.navigateTo({ url: "/pages/mine/components/coupon" });
  } else if (index == 1) {
    uni.navigateTo({ url: "/pages/mine/components/interest" });
  } else if (index == 0) {
    uni.navigateTo({ url: "/pages/mine/components/collect" });
  }
};
const fnsetup = (index: number) => {
  if (index == 2) {
    uni.navigateTo({ url: "/pages/FamilyArchives/index" });
  }
  if (index == 6) {
    uni.navigateTo({ url: "/pages/mine/components/setup" });
  }
  if (index == 0) {
    uni.navigateTo({ url: "/pages/inquiryRecord/index" });
  }
};
</script>

<template>
  <!-- 头像部分显示 -->
  <view
    class="bg-gradient-to-b from-[rgb(204,233,231)] from-[5%] to-[rgb(246,247,249)] to-[18%] overflow-y-scroll h-[calc(100vh-100rpx)] w-[100%]"
  >
    <view class="w-full h-300rpx flex items-center">
      <wd-skeleton v-if="false" class="ml-25rpx" theme="avatar" />
      <wd-img
        v-else
        custom-class="ml-25rpx"
        width="138rpx"
        height="138rpx"
        round
        src="/src/static/images/default-avatar.png"
      />
      <view class="justify-evenly flex-col flex h-138rpx ml-23rpx">
        <view class="text-center tracking--0.3rpx lh-normal text-36rpx font-medium text-[#000000]">
          用户名
        </view>
        <wd-icon name="edit" color="#16C2A3" size="24rpx"></wd-icon>
      </view>
    </view>
    <!-- 展示 -->
    <view class="w-full h-164rpx flex justify-center">
      <view v-for="(item, index) in list" class="w-[25%] h-full flex justify-center items-center">
        <view
          class="w-[70%] h-[70%] flex justify-center items-center flex-col"
          @click="fncoupon(index)"
        >
          <text
            class="text-center tracking-0rpx leading-48rpx text-48rpx font-bold text-[#000000] font-size-46"
          >
            {{ item.count }}
          </text>
          <text
            class="text-center tracking-0rpx leading-34rpx text-24rpx text-[#979797] font-regular"
          >
            {{ item.title }}
          </text>
        </view>
      </view>
    </view>
    <!-- 药品订单 -->
    <view class="rounded-10rpx w-[90%] ml-[5%] my-10rpx bg-white flex flex-col">
      <view class="mt-20rpx ml-20rpx w-[94%] h-40rpx flex justify-between">
        <view class="text-center tracking-0rpx leading-48rpx text-32rpx font-medium text-[#000000]">
          药品订单
        </view>
        <view class="text-left tracking-0rpx leading-48rx text-26rpx font-regular text-[#C3C3C5]">
          全部订单 >
        </view>
      </view>
      <view class="mb-60rpx mt-80rpx w-full h-50rpx flex">
        <view
          v-for="item in iconList"
          class="h-full w-[25%] flex justify-center items-center flex-col"
        >
          <img :src="item.icon" alt="" width="30" height="30" />
          <text
            class="text-center tracking-0rpx leading-36rpx text-24rpx font-regular text-[#3C3E42] mt-20rpx"
          >
            {{ item.title }}
          </text>
        </view>
      </view>
    </view>
    <!-- 快捷工具 -->
    <view class="rounded-10rpx w-[90%] ml-[5%] my-30rpx bg-white flex flex-col">
      <view class="mt-30rpx ml-20rpx w-[94%] h-40rpx">
        <view class="tracking-0rpx leading-48rpx text-32rpx font-medium text-[#000000]">
          快捷工具
        </view>
      </view>
      <view
        v-for="(item, index) in tools"
        class="w-[94%] ml-20rpx my-30rpx flex items-center justify-between"
        @click="fnsetup(index)"
      >
        <view class="w-220rpx h-60rpx flex items-center">
          <img :src="item.icon" alt="" width="30" height="30" />
          <text
            class="text-left tracking-0rpx leading-42rpx text-28rpx font-regular text-[#3C3E42] ml"
          >
            {{ item.title }}
          </text>
        </view>
        <img src="/src/static/my/myRight.png" alt="" width="30" height="30" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.box {
  height: calc(100vh - 200rpx);
}
.custom-shadow {
  width: 90%;
  margin: 10rpx 0;
  margin-left: 5%;
  box-shadow:
    0 3px 1px -2px rgb(0 0 0 / 20%),
    0 2px 2px 0 rgb(0 0 0 / 14%),
    0 1px 5px 0 rgb(0 0 0 / 12%);
}
</style>
